<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师管理</title>
    <link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/vue/date.js"></script>
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/all.js"></script>
    <script type="text/javascript" src="../resources/js/tag-list.js"></script>
    <script type="text/javascript" src="../resources/js/add-tag.js"></script>
    <script type="text/javascript" src="../resources/js/add-tag.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js" charset="utf-8"></script>
</head>
<body>
<header>
    <div class="logo">
        <h1>在线考试系统</h1>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="nav-tabs">
                    <a href="main.html" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li>
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li>
                    <a href="exampaper-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li>
                    <a href="exam-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="/toUser.do" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li class="nav-tabs">
                    <a href="/toTag.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="/toSystem.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>



 <div id="exam-content-left" style="width: 150px; position: relative ;left: 220px;">
        <ul class="nav nav-pills nav-stacked" style="font-size: 1.1em; margin-top: 100px; text-align: right;">
            <li>
                <a href="tag-list.html"> <i class="glyphicon glyphicon-bell"></i> 标签管理 </a>
            </li>
            <li class="active">
                <a> <i class="glyphicon glyphicon-bell"></i> 专业题库 </a>
            </li>
            <li>
                <a href="knowledge-list.html"> <i class="glyphicon glyphicon-th-list"></i> 知识分类 </a>
            </li>
            <li>
                <a href="dep-list.html"> <i class="glyphicon glyphicon-floppy-disk"></i> 班级管理 </a>
            </li>
        </ul>
    </div>

<div class="container">

        <div class="col-xs-10" id="right-content">
            <div class="page-header"></div>
            <div id="app" class="container" >
                <div class="table-responsive" style="width: 1000px;" >

                    <div id="field-list" >
                        <div class="table-controller">
                            <div class="btn-group table-controller-item" style="float:left">
                                <button class="btn btn-default btn-sm" id="add-field-modal-btn"
                                        style="font-size: 1.2em;">
                                    <i class="fa fa-plus-square"></i> 添加专业题库
                                </button>
                            </div>
                        </div>
                        <table  class="table-striped table">
                            <thead>
                            <tr>
                                <td>序号</td>
                                <td>所属题库</td>
                                <td>描述</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="active" v-for="(item,index) in result">
                                <td>{{index+1}}</td>
                                <td>{{item.fieldName}}</td>
                                <td>{{item.memo}}</td>
                                <td><a href='javascript:void(0)' @click="editEvent(item.fieldId)">编辑</a>|<a
                                        href='javascript:void(0)' @click="delEvent(item.fieldId)">删除</a>
                                </td>

                            </tr>
                            </tbody>
                            <tr>
                                <td colspan="3">
                                    <div id="pagenav" style="margin:10px 450px;"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);"
                                                                                   target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

</footer>

</body>
</html>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });

    //查询用户数据
    var getFieldPageList = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/page',
            dataType: 'json',
            data: {
                pageSize: 10,
                pageNum: curr || 1,
                name: $("#fieldName").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',  //分页容器
                    pages: msg.totalPage, //总页数
                    skin: '#333333',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getFieldPageList(obj.curr);
                        }
                    }
                });
            }
        });
    }

    getFieldPageList();


    // $("#findUser").click(function () {
    //     getFieldPageList();
    // });


    $("#add-field-modal-btn").click(function () {
        layer.open({
            type: 2,
            title: '添加专业题库',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['800px', '600px'],
            content: '/view/add-field.html',
            end: function () {
                getFieldPageList();
            }
        });
    });

    var delEvent = function (fieldId) {
        layer.confirm('确认删除？', {
            btn: ['是', '否']
        }, function () {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: '/delField',
                data: {
                    fieldId: fieldId
                },
                success: function (msg) {
                    if (msg > 0) {
                        getFieldPageList();
                        layer.msg('成功删除', {icon: 6});
                    } else {
                   //     alert("删除失败");
                    }
                }, error: function () {
                   layer.msg("该题库的试题正在被使用,不允许删除");
                }

            });
        }, function () {

        });
    }


    var editEvent = function (fieldId) {
        layer.open({
            type: 2,
            title: '编辑',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: '/getFieldById?fieldId=' + fieldId,
            end: function () {
                getFieldPageList();
            }
        });

    }

</script>